<template>
    <div class="appointment-container">
        <!-- 页面标题 -->
        <div class="header-title">会议预约</div>

        <!-- 查询与筛选区域 -->
        <el-form :inline="true" class="filter-form" size="small">
            <el-input v-model="search.meetingName" placeholder="请输入会议名称" style="width: 200px; margin-right: 8px" />
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
        </el-form>

        <!-- 操作按钮 -->
        <div class="action-btns" style="margin-bottom: 16px;">
            <el-button type="primary" @click="openNewMeetingDialog">预约会议</el-button>
        </div>

        <!-- 会议数据表格 -->
        <el-table :data="appointmentList" border stripe size="small" style="width: 100%">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="meetingTime" label="会议时间" width="180">
                <template #default="scope">
                    <span>{{
                        moment(scope.row.meetingTime).format("YYYY-MM-DD")
                    }}</span>&nbsp;&nbsp;
                    <span>{{
                        moment(scope.row.beginTime).format("hh:mm")
                    }}</span>
                    ——
                    <span>{{
                        moment(scope.row.endTime).format("hh:mm")
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="meetingName" label="会议名称" width="150" />
            <el-table-column prop="meetingStatus" label="会议状态" width="100">
                <template #default="scope">
                    <span v-if="scope.row.meetingStatus == 0">未开始</span>
                    <span v-else>已结束</span>
                </template>
            </el-table-column>
            <el-table-column prop="administrator" label="会议室管理员" width="120" />
            <el-table-column prop="roomName" label="会议室" width="140" />
            <el-table-column prop="user" label="使用人" width="100" />
            <el-table-column prop="meetingTheme" label="会议主题" />
            <el-table-column label="操作" width="220">
                <template #default="scope">
                    <el-button type="text" style="color: #409eff;"
                        @click="openMeetingDetailDialog(scope.row)">会议详情</el-button>
                    <el-button type="text" :style="{ color: scope.row.meetingStatus == 1 ? '#cccccc' : '#67c23a' }"
                        :disabled="scope.row.meetingStatus == 1"
                        @click="openEditMeetingDialog(scope.row)">修改会议</el-button>
                    <el-button type="text" :style="{ color: scope.row.meetingStatus == 0 ? '#cccccc' : '#e6a23c' }"
                        :disabled="scope.row.meetingStatus == 0"
                        @click="openMeetingMinutesDialog(scope.row)">会议纪要</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-row style=" margin-top: 10px;">
            <el-pagination v-model:current-page="Pageinfo.pageIndex" v-model:page-size="Pageinfo.pageSize"
                :page-sizes="[5, 10, 20]" :size="Pageinfo.pageSize" :disabled="false" :background="true"
                layout="total,slot" :total="Pageinfo.totalCount" prev-text="上一页" next-text="下一页">
                第{{ Pageinfo.pageIndex }}/{{ Pageinfo.pageCount }}页
            </el-pagination>

            <el-pagination v-model:current-page="Pageinfo.pageIndex" v-model:page-size="Pageinfo.pageSize"
                :page-sizes="[5, 10, 20]" :size="Pageinfo.pageSize" :disabled="false" :background="true"
                layout=" sizes,slot, prev, pager, next" :total="Pageinfo.totalCount" prev-text="上一页" next-text="下一页">
                <el-button :disabled="Pageinfo.pageIndex == 1" @click="Pageinfo.pageIndex = 1">首页</el-button>
            </el-pagination>

            <el-pagination v-model:current-page="Pageinfo.pageIndex" v-model:page-size="Pageinfo.pageSize"
                :page-sizes="[5, 10, 20]" :size="Pageinfo.pageSize" :disabled="false" :background="true"
                layout="slot, jumper" :total="Pageinfo.totalCount" prev-text="上一页" next-text="下一页">
                <el-button :disabled="Pageinfo.pageIndex == Pageinfo.pageCount"
                    @click="Pageinfo.pageIndex = Pageinfo.pageCount">尾页</el-button>
            </el-pagination>
        </el-row>

        <!-- 预约会议对话框 -->
        <el-dialog title="会议预约" v-model="scheduleMeetingDialogVisible" width="40%" @close="resetScheduleMeetingForm">
            <el-form :model="scheduleMeetingForm" :rules="scheduleMeetingRules" ref="scheduleMeetingFormRef"
                label-width="100px">
                <!-- 基本信息 -->
                <div class="form-section-title"><span class="section-title-icon"></span>基本信息</div>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="会议名称" prop="meetingName">
                            <el-input v-model="scheduleMeetingForm.meetingName" placeholder="请输入会议名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="会议主题" prop="meetingTheme">
                            <el-input v-model="scheduleMeetingForm.meetingTheme" placeholder="请输入会议主题"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="会议地点" prop="meetingRoomID">
                            <el-select v-model="scheduleMeetingForm.meetingRoomID" placeholder="请选择会议室"
                                style="width: 100%;">
                                <!-- 这里的 options 需要绑定到会议室列表数据 -->
                                <el-option v-for="item in RoomListInfo" :key="item.id" :label="item.roomName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="主持人" prop="compere">
                            <el-input v-model="scheduleMeetingForm.compere" placeholder="主持人"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="会议时间" prop="meetingTime">
                            <el-date-picker v-model="scheduleMeetingForm.meetingTime" type="date" placeholder="请选择日期"
                                style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label-width="0px" prop="beginTime">
                            <el-time-picker v-model="scheduleMeetingForm.beginTime" placeholder="开始时间"
                                style="width: 100%;"></el-time-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label-width="0px" prop="endTime">
                            <el-time-picker v-model="scheduleMeetingForm.endTime" placeholder="结束时间"
                                style="width: 100%;"></el-time-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="会议参与人" prop="participant">
                    <el-input v-model="scheduleMeetingForm.participant" placeholder="参与人"></el-input>
                </el-form-item>

                <el-form-item label="会议使用人" prop="user">
                    <el-input v-model="scheduleMeetingForm.user" placeholder="使用人"></el-input>
                </el-form-item>

                <el-form-item label="会议内容" prop="meetingContent">
                    <el-input type="textarea" v-model="scheduleMeetingForm.meetingContent" placeholder="会议内容"
                        :rows="4"></el-input>
                </el-form-item>

                <!-- 会议设置 -->
                <div class="form-section-title"><span class="section-title-icon"></span>会议设置</div>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="会议签到" prop="isSignin">
                            <el-radio-group v-model="scheduleMeetingForm.isSignin">
                                <el-radio-button :label="true">是</el-radio-button>
                                <el-radio-button :label="false">否</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="会议口令" prop="isCommand">
                            <el-radio-group v-model="scheduleMeetingForm.isCommand">
                                <el-radio-button :label="true">是</el-radio-button>
                                <el-radio-button :label="false">否</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="短信通知" prop="isNote">
                            <el-radio-group v-model="scheduleMeetingForm.isNote">
                                <el-radio-button :label="true">是</el-radio-button>
                                <el-radio-button :label="false">否</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否远程" prop="isLongdistance">
                            <el-radio-group v-model="scheduleMeetingForm.isLongdistance">
                                <el-radio-button :label="true">是</el-radio-button>
                                <el-radio-button :label="false">否</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="scheduleMeetingDialogVisible = false">取消</el-button>
                    <el-button type="primary">保存为模板</el-button>
                    <el-button type="primary" @click="saveScheduledMeeting">确定</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 会议详情对话框 -->
        <el-dialog title="会议详情" v-model="meetingDetailDialogVisible" width="50%">
            <div class="form-section-title"><span class="section-title-icon"></span>基本信息</div>
            <el-form label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="会议名称:">
                            <span>{{ currentMeetingDetails.meetingName }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="会议时间:"><span>{{
                            moment(currentMeetingDetails.meetingTime).format("YYYY-MM-DD")
                                }}</span>&nbsp;&nbsp;
                            <span>{{
                                moment(currentMeetingDetails.beginTime).format("hh:mm")
                                }}</span>
                            ——
                            <span>{{
                                moment(currentMeetingDetails.endTime).format("hh:mm")
                                }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="会议地点:">
                            <span>{{ currentMeetingDetails.roomName }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="会议电话:">
                            <span>{{ currentMeetingDetails.phoneNumber }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="参会人员:">
                    <el-tag
                        v-for="(person, index) in currentMeetingDetails.participant ? currentMeetingDetails.participant.split(',') : []"
                        :key="index" style="margin-right: 5px;">
                        {{ person }}
                    </el-tag>
                </el-form-item>

                <el-form-item label="线上地址:">
                    <a :href="currentMeetingDetails.onlineAddress" target="_blank">https://element-plus.org/zh-CN/</a>
                </el-form-item>

            </el-form>

            <div class="form-section-title" style="margin-top: 20px;"><span class="section-title-icon"></span>会议内容</div>
            <el-form label-width="100px">
                <el-form-item label="会议内容:">
                    <span>{{ currentMeetingDetails.meetingContent }}</span>
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="meetingDetailDialogVisible = false">返回</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 会议纪要对话框 -->
        <el-dialog title="会议纪要" v-model="meetingMinutesDialogVisible" width="60%">
            <div class="form-section-title"><span class="section-title-icon"></span>基本信息</div>
            <el-form label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="会议名称:">
                            <span>{{ currentMeetingMinutes.meetingName }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="会议时间:">
                            <span>{{
                                moment(currentMeetingMinutes.meetingTime).format("YYYY-MM-DD")
                                }}</span>&nbsp;&nbsp;
                            <span>{{
                                moment(currentMeetingMinutes.beginTime).format("hh:mm")
                                }}</span>
                            ——
                            <span>{{
                                moment(currentMeetingMinutes.endTime).format("hh:mm")
                                }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="会议地点:">
                            <span>{{ currentMeetingMinutes.roomName }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="参会人员:">
                    <el-tag
                        v-for="(person, index) in currentMeetingMinutes.participant ? currentMeetingMinutes.participant.split(',') : []"
                        :key="index" style="margin-right: 5px;">
                        {{ person }}
                    </el-tag>
                </el-form-item>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="主持人:">
                            <span>{{ currentMeetingMinutes.compere }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="记录人:">
                            <span>张三</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="决策人:">
                    <span>李四</span>
                </el-form-item>

            </el-form>

            <div class="form-section-title" style="margin-top: 20px;"><span class="section-title-icon"></span>会议内容</div>
            <el-form label-width="100px">
                <el-form-item label="会议内容:">
                    <span>{{ currentMeetingMinutes.meetingContent }}</span>
                </el-form-item>
                <el-form-item label="会议附件:">
                    <a :href="currentMeetingMinutes.meetingAttachment" target="_blank">{{
                        currentMeetingMinutes.meetingAttachment || '无附件' }}</a>
                </el-form-item>
                <el-form-item label="">
                    <el-checkbox
                        v-model="currentMeetingMinutes.saveAndSendByEmail">保存成功后，自动通过邮件的方式将会议纪要发送给参会人员</el-checkbox>
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="meetingMinutesDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveMeetingMinutes">保存</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, watch } from "vue";
import { GetAppiont, GetRoomList, AddAppiont, UpdateAppiont } from "@/Api/room"
import { ElMessageBox, ElMessage, ElInputNumber, ElTag } from 'element-plus'
import moment from "moment";
// 查询条件信息
const search = reactive({
    meetingName: "",
});

// 会议预约列表数据 (模拟数据)
const appointmentList = ref<any[]>([]);// 明确指定类型为 any[]

//分页条件信息
const Pageinfo = reactive({
    pageIndex: 1,
    pageSize: 10, // 默认每页显示10条
    totalCount: 0,
    pageCount: 0,
});

// 获取会议预约列表
const getAppointmentList = async () => {
    var params = {
        pageIndex: Pageinfo.pageIndex,
        pageSize: Pageinfo.pageSize,
        meetingName: search.meetingName,
    }
    console.log("获取会议列表参数:", params);
    // 调用后端接口获取会议列表数据
    var response = await GetAppiont(params);
    appointmentList.value = response.data.data.pageData
    Pageinfo.totalCount = response.data.data.totalCount
    Pageinfo.pageCount = response.data.data.pageCount
};

// 处理查询按钮点击
const handleSearch = () => {
    Pageinfo.pageIndex = 1; // 查询时重置到第一页
    getAppointmentList();
};

// 处理重置按钮点击
const handleReset = () => {
    search.meetingName = "";
    Pageinfo.pageIndex = 1; // 重置时重置到第一页
    getAppointmentList();
};

// 控制预约会议对话框的显示隐藏
const scheduleMeetingDialogVisible = ref(false);

// 预约会议表单
const scheduleMeetingForm = reactive<any>({
    "meetingReservationId": 0,
    "meetingTime": "",// 预约时间
    "beginTime": "",// 开始时间
    "endTime": "",//结束时间
    "meetingName": "",//会议名称
    "meetingStatus": 0,//预约状态
    "meetingRoomID": "",//会议室ID
    "user": "",//使用人
    "meetingTheme": "",//主题
    "compere": "",// 主持人
    "participant": "",// 参会人
    "meetingContent": "",
    "isSignin": true,// 是否签到
    "isCommand": true,// 是否口令
    "commandMsg": "",// 口令
    "isNote": true,// 是否短信
    "isLongdistance": true// 是否远程
});

// 预约会议表单ref
const scheduleMeetingFormRef = ref()

// 预约会议表单校验规则
const scheduleMeetingRules = reactive({
    meetingName: [{ required: true, message: '请输入会议名称', trigger: 'blur' }],
    meetingTheme: [{ required: true, message: '请输入会议主题', trigger: 'blur' }],
    meetingRoomID: [{ required: true, message: '请选择会议地点', trigger: 'change' }],
    compere: [{ required: true, message: '请输入主持人', trigger: 'blur' }],
    meetingTime: [{ required: true, message: '请选择会议日期', trigger: 'change' }],
    beginTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
    endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
    participant: [{ required: true, message: '请输入会议参与人', trigger: 'blur' }],
    user: [{ required: true, message: '请输入会议使用人', trigger: 'blur' }],
    meetingContent: [{ required: true, message: '请输入会议内容', trigger: 'blur' }],
    isSignin: [{ required: true, message: '请选择是否签到', trigger: 'change' }],
    isCommand: [{ required: true, message: '请选择会议口令', trigger: 'change' }],
    isNote: [{ required: true, message: '请选择是否短信通知', trigger: 'change' }],
    isLongdistance: [{ required: true, message: '请选择是否远程会议', trigger: 'change' }],
});

// 处理预约会议按钮点击 (改为打开新会议对话框)
const openNewMeetingDialog = () => {
    // 重置表单以便输入新的会议信息
    resetScheduleMeetingForm();
    scheduleMeetingDialogVisible.value = true;
    // 可以在这里加载会议名称、会议室列表等数据
    console.log("点击预约会议按钮");
};

// 打开修改会议对话框
const openEditMeetingDialog = (row: any) => {
    // 将当前行的数据赋值给 scheduleMeetingForm
    Object.assign(scheduleMeetingForm, row);
    // 将会议时间 Date 对象赋值给 beginTime 和 endTime
    scheduleMeetingForm.beginTime = new Date(row.meetingTime);
    scheduleMeetingForm.endTime = new Date(new Date(row.meetingTime).getTime() + 3600000); // 示例，加一小时

    //日期和时间单独赋值
    scheduleMeetingForm.meetingTime = row.meetingTime; // 假设 row.meetingTime 包含日期部分
    scheduleMeetingForm.beginTime = row.beginTime; // 假设 row.beginTime 包含开始时间部分
    scheduleMeetingForm.endTime = row.endTime; // 假设 row.endTime 包含结束时间部分

    scheduleMeetingDialogVisible.value = true;
    console.log("点击修改会议按钮，数据:", row);
};

// 关闭预约会议对话框时重置表单和校验状态
const resetScheduleMeetingForm = () => {
    if (scheduleMeetingFormRef.value) {
        scheduleMeetingFormRef.value.resetFields(); // 重置表单校验状态
    }
    // 手动重置其他字段为初始值
    scheduleMeetingForm.meetingReservationId = 0;
    scheduleMeetingForm.meetingTime = "";
    scheduleMeetingForm.beginTime = "";
    scheduleMeetingForm.endTime = "";
    scheduleMeetingForm.meetingName = "";
    scheduleMeetingForm.meetingStatus = 0;
    scheduleMeetingForm.meetingRoomID = "";
    scheduleMeetingForm.user = "";
    scheduleMeetingForm.meetingTheme = "";
    scheduleMeetingForm.compere = "";
    scheduleMeetingForm.participant = "";
    scheduleMeetingForm.meetingContent = "";
    scheduleMeetingForm.isSignin = true;
    scheduleMeetingForm.isCommand = true;
    scheduleMeetingForm.commandMsg = "";
    scheduleMeetingForm.isNote = true;
    scheduleMeetingForm.isLongdistance = true;
};

// 保存预约会议
const saveScheduledMeeting = async () => {
    if (!scheduleMeetingFormRef.value) return;

    scheduleMeetingFormRef.value.validate(async (valid: any) => {
        if (valid) {
            console.log("保存预约的会议信息:", scheduleMeetingForm);
            // 判断是新增还是修改
            if (scheduleMeetingForm.meetingReservationId != 0) {
                // 调用修改接口
                const response = await UpdateAppiont(scheduleMeetingForm);
                if (response.data && response.data.code === 200) {
                    ElMessage.success("预约会议成功!");
                } else {
                    ElMessage.error("预约会议失败，请重试!"); // 或者显示后端返回的错误信息
                }
            } else {
                // 调用新增接口
                const response = await AddAppiont(scheduleMeetingForm);
                if (response.data && response.data.code === 200) {
                    ElMessage.success("预约会议成功!");
                } else {
                    ElMessage.error("预约会议失败，请重试!"); // 或者显示后端返回的错误信息
                }
            }

            scheduleMeetingDialogVisible.value = false;
            getAppointmentList(); // 刷新列表

        } else {
            console.log('表单校验失败');
        }
        return; // 显式返回 void
    });
};

// 会议室的下拉列表
const RoomListInfo = ref([{
    id: '',
    roomName: ''
}])

//获取会议室的下拉列表
const GetRoomListInfo = async () => {
    var response = await GetRoomList();
    RoomListInfo.value = response.data.data
}

// 控制会议详情对话框的显示隐藏
const meetingDetailDialogVisible = ref(false);

// 当前查看的会议详情
const currentMeetingDetails = reactive<any>({
    meetingName: '',
    meetingTime: '',
    beginTime: '',
    endTime: '',
    roomName: '', // 假设会议地点直接返回 roomName
    phoneNumber: '', // 假设有会议电话字段
    participant: '', // 参会人员，假设是逗号分隔字符串
    onlineAddress: '', // 线上地址
    meetingContent: '', // 会议内容
    // ... 其他可能需要的详情字段
});

// 打开会议详情对话框
const openMeetingDetailDialog = (row: any) => {
    // 将当前行的数据赋值给 currentMeetingDetails
    Object.assign(currentMeetingDetails, row);
    // 假设 row 中包含 phoneNumber 和 onlineAddress 字段
    // 如果您的后端返回数据结构不同，请调整这里的字段映射
    currentMeetingDetails.phoneNumber = row.phoneNumber || '无'; // 示例：如果没有电话则显示'无'
    currentMeetingDetails.onlineAddress = row.onlineAddress || ''; // 示例：如果没有线上地址则为空

    console.log(row);

    meetingDetailDialogVisible.value = true;



};

// 控制会议纪要对话框的显示隐藏
const meetingMinutesDialogVisible = ref(false);

// 当前查看的会议纪要
const currentMeetingMinutes = reactive<any>({
    meetingName: '',
    meetingTime: '',
    beginTime: '',
    endTime: '',
    roomName: '', // 假设会议地点直接返回 roomName
    participant: '', // 参会人员，假设是逗号分隔字符串
    compere: '', // 主持人
    recorder: '', // 记录人
    decisionMaker: '', // 决策人
    meetingContent: '', // 会议内容
    meetingAttachment: '', // 会议附件链接
    saveAndSendByEmail: false, // 保存并发送邮件选项
    // ... 其他可能需要的纪要字段
});

// 打开会议纪要对话框
const openMeetingMinutesDialog = (row: any) => {
    // 将当前行的数据赋值给 currentMeetingMinutes
    // 注意：这里需要确保 row 的字段名与 currentMeetingMinutes 的字段名一致
    // 或者进行适当的映射
    Object.assign(currentMeetingMinutes, row);
    // 假设 row 中包含 recorder, decisionMaker, meetingAttachment, saveAndSendByEmail 字段
    // 如果您的后端返回数据结构不同，请调整这里的字段映射
    currentMeetingMinutes.recorder = row.recorder || '无';
    currentMeetingMinutes.decisionMaker = row.decisionMaker || '无';
    currentMeetingMinutes.meetingAttachment = row.meetingAttachment || '';
    currentMeetingMinutes.saveAndSendByEmail = row.saveAndSendByEmail || false;

    meetingMinutesDialogVisible.value = true;
    console.log("点击会议纪要按钮，数据:", row);
};

// 保存会议纪要
const saveMeetingMinutes = () => {
    // 保存会议纪要
    console.log("保存会议纪要", currentMeetingMinutes);
    ElMessage.info("保存会议纪要成功");
    meetingMinutesDialogVisible.value = false;
};

//监听分页
watch(Pageinfo, () => {
    getAppointmentList();
}, { deep: true })

// 在组件加载时获取会议列表数据
onMounted(() => {
    // 获取会议列表
    getAppointmentList();
    GetRoomListInfo();
});

</script>

<style scoped>
.appointment-container {
    background: #fff;
    padding: 2% 3%;
    border-radius: 0.5em;
}

.header-title {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 2%;
}

.filter-form {
    margin-bottom: 1.5%;
}

.action-btns {
    margin-bottom: 1.5%;
}

.el-table .el-table__cell {
    padding: 6px 8px !important;
    font-size: 14px;
}

/* 会议预约对话框样式 */
.form-section-title {
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 垂直居中对齐内容 */
    font-size: 1.1em;
    /* 稍微增大字体 */
    font-weight: bold;
    margin-bottom: 15px;
    /* 增加下边距 */
    padding-bottom: 5px;
    /* 标题和下划线之间的空隙 */
    border-bottom: 1px solid #eee;
    /* 添加下划线 */
    margin-top: 20px;
    /* 增加上边距，分隔不同的部分 */
}

/* 会议设置部分的标题图标样式 */
.section-title-icon {
    display: inline-block;
    width: 12px;
    /* 方块宽度 */
    height: 12px;
    /* 方块高度 */
    background-color: #409eff;
    /* 蓝色 */
    margin-right: 8px;
    /* 与文本的间距 */
    vertical-align: middle;
    /* 垂直对齐 */
    position: relative;
    top: -1px;
    /* 微调位置 */
    border-radius: 2px;
    /* 轻微圆角 */
}

/* 调整对话框主体内边距 */
.el-dialog__body {
    padding-top: 10px;
    /* 顶部内边距 */
    padding-bottom: 10px;
    /* 底部内边距 */
    /* Element Plus 默认有左右内边距，如果需要可以调整 */
}
</style>